<template>
    <!-- <div class="wrap"> -->
        <div class="bar-wrap flex">
            <router-link class="bar-item column" v-for='(item,index) in barList' :key="index" :to="item.url">
                <div class="img-wrap flex">
                    <img :src="active == item.label?item.imgActive:item.img">
                </div>
                <span :class="{'colorActive':active == item.label}">{{item.text}}</span>
            </router-link>
        </div>
    <!-- </div> -->
</template>

<script>
import { Tabbar, TabItem } from "mint-ui";
import ask from "../assets/ask.png";
import askActive from "../assets/ask-active.png";
import recipe from "../assets/recipe.png";
import recipeActive from "../assets/recipe-active.png";
import doctor from "../assets/doctor.png";
import doctorActive from "../assets/doctor-active.png";
export default {
  data() {
    return {
        fixed: true,
        selected: "",
        ask,
        askActive,
        recipe,
        recipeActive,
        doctor,
        doctorActive,
        barList:[
            {
              img:ask,
              imgActive:askActive,
              text:'问诊',
              label:'ask',
              url:'/ask'
            },
            {
              img:recipe,
              imgActive:recipeActive,
              text:'抓药',
              label:'fillDurg',
              url:'/fillDurg'
            },
            {
              img:doctor,
              imgActive:doctorActive,
              text:'名医',
              label:'doctor',
              url:'/doctor'
            },
        ]
    };
  },
  props: {
      active:''
  }
};
</script>

<style lang="scss" scoped>
@import "../base/css/_base.scss";
    .bar-wrap {
        height: torem(100px);
        // width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 100;
        background: #fff;
        max-width: 750px;
        margin: 0 auto;
        .bar-item {
            flex:1;
            align-items: center;
            justify-content: center;
            font-size: torem(26px);
            color: #bf9360;
            .img-wrap{
                width: torem(52px);
                height: torem(52px);
                align-items: center;
                justify-content: center;
            }
            .colorActive{
                color:#e53f1d;
            }
        }
        .bar-item:first-child img{
            width: torem(40px);
            height: torem(44px);
        }
        .bar-item:nth-child(2) img{
            width: torem(50px);
            height: torem(39px);
        }
        .bar-item:last-child img{
            width: torem(40px);
            height: torem(51px);
        }
    }
</style>
